<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - 企业官网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0D2E88',
                        accent: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB',
                        sidebar: '#0F172A',
                        sidebarActive: '#1E293B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-link {
                @apply flex items-center p-3 text-gray-300 hover:bg-sidebarActive hover:text-white rounded-lg transition-colors duration-200;
            }
            .sidebar-link.active {
                @apply bg-sidebarActive text-white;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm p-6 mb-6;
            }
            .table-data {
                @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500 border-b border-gray-200;
            }
            .table-header {
                @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
            }
        }
    </style>
</head>
<body class="font-sans text-dark bg-gray-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <aside class="bg-sidebar w-64 hidden md:block flex-shrink-0 transition-all duration-300">
            <div class="flex items-center justify-center h-16 border-b border-gray-700">
                <h1 class="text-white text-xl font-bold">企业网站管理系统</h1>
            </div>
            
            <nav class="px-4 py-6 space-y-1">
                <a href="/admin" class="sidebar-link active">
                    <i class="fa fa-tachometer mr-3"></i>
                    <span>仪表盘</span>
                </a>
                
                <div class="sidebar-group">
                    <div class="sidebar-link cursor-pointer">
                        <i class="fa fa-newspaper-o mr-3"></i>
                        <span>新闻管理</span>
                        <i class="fa fa-angle-down ml-auto transition-transform duration-200"></i>
                    </div>
                    <div class="sidebar-submenu pl-10 space-y-1 hidden">
                        <a href="/admin/news/list" class="sidebar-link">
                            <span>新闻列表</span>
                        </a>
                        <a href="/admin/news/edit" class="sidebar-link">
                            <span>添加新闻</span>
                        </a>
                        <!-- <a href="/admin/news/categories" class="sidebar-link">
                            <span>新闻分类</span>
                        </a> -->
                    </div>
                </div>
                
                <div class="sidebar-group">
                    <div class="sidebar-link cursor-pointer">
                        <i class="fa fa-cubes mr-3"></i>
                        <span>产品管理</span>
                        <i class="fa fa-angle-down ml-auto transition-transform duration-200"></i>
                    </div>
                    <div class="sidebar-submenu pl-10 space-y-1 hidden">
                        <a href="/admin/products/list" class="sidebar-link">
                            <span>产品列表</span>
                        </a>
                        <a href="/admin/products/add" class="sidebar-link">
                            <span>添加产品</span>
                        </a>
                        <!-- <a href="/admin/products/categories" class="sidebar-link">
                            <span>产品分类</span>
                        </a> -->
                    </div>
                </div>
                
                <div class="sidebar-group">
                    <div class="sidebar-link cursor-pointer">
                        <i class="fa fa-briefcase mr-3"></i>
                        <span>案例管理</span>
                        <i class="fa fa-angle-down ml-auto transition-transform duration-200"></i>
                    </div>
                    <div class="sidebar-submenu pl-10 space-y-1 hidden">
                        <a href="/admin/cases/list" class="sidebar-link">
                            <span>案例列表</span>
                        </a>
                        <a href="/admin/cases/add" class="sidebar-link">
                            <span>添加案例</span>
                        </a>
                    </div>
                </div>
                
                <a href="/admin/about" class="sidebar-link">
                    <i class="fa fa-info-circle mr-3"></i>
                    <span>关于我们管理</span>
                </a>
                <a href="/admin/carousels" class="sidebar-link">
                    <i class="fa fa-info-circle mr-3"></i>
                    <span>轮播图管理</span>
                </a>
                <a href="/admin/jobs" class="sidebar-link">
                    <i class="fa fa-users mr-3"></i>
                    <span>招聘管理</span>
                </a>
                
                <a href="/admin/messages" class="sidebar-link">
                    <i class="fa fa-comments mr-3"></i>
                    <span>留言管理</span>
                </a>
                
                <a href="/admin/users" class="sidebar-link">
                    <i class="fa fa-user-circle mr-3"></i>
                    <span>用户管理</span>
                </a>
<!--                 
                <a href="/admin/settings" class="sidebar-link">
                    <i class="fa fa-cog mr-3"></i>
                    <span>网站设置</span>
                </a> -->
            </nav>
        </aside>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm h-16 flex items-center justify-between px-6">
                <div class="flex items-center">
                    <button id="sidebar-toggle" class="md:hidden text-gray-500 hover:text-gray-700 mr-4">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h2 class="text-xl font-semibold">仪表盘</h2>
                </div>
                
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <button class="text-gray-500 hover:text-gray-700">
                            <i class="fa fa-bell text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
                        </button>
                    </div>
                    
                    <div class="relative group">
                        <button class="flex items-center">
                            <img src="https://picsum.photos/32/32?random=1" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-sm font-medium">{{ current_user.username }}</span>
                            <i class="fa fa-angle-down ml-2 text-gray-500"></i>
                        </button>
                        
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block transition-all duration-200">
                            <a href="/admin/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fa fa-user mr-2"></i>个人资料
                            </a>
                            <a href="/admin/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fa fa-cog mr-2"></i>账户设置
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="/logout" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                <i class="fa fa-sign-out mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <main class="flex-1 overflow-y-auto p-6">
                {% block content %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="card">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-newspaper-o text-primary text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-500 text-sm">新闻总数</p>
                                <h3 class="text-2xl font-bold text-dark" id="news-count">0</h3>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                            <span id="news-percentage" class="text-green-500 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 0%
                            </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-cubes text-accent text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-500 text-sm">产品总数</p>
                                <h3 class="text-2xl font-bold text-dark" id="product-count">0</h3>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                            <span id="product-percentage" class="text-green-500 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 0%
                            </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-briefcase text-secondary text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-500 text-sm">案例总数</p>
                                <h3 class="text-2xl font-bold text-dark" id="case-count">0</h3>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                            <span id="case-percentage" class="text-green-500 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 0%
                            </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-comments text-red-500 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-500 text-sm">留言总数</p>
                                <h3 class="text-2xl font-bold text-dark" id="message-count">0</h3>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                            <span id="message-percentage" class="text-red-500 flex items-center">
                                <i class="fa fa-arrow-down mr-1"></i> 0%
                            </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="lg:col-span-2">
                        <div class="card">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-lg font-bold text-dark">最近新闻</h3>
                                <a href="/admin/news/list" class="text-primary hover:text-primary/80 text-sm">查看全部</a>
                            </div>
                            
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="table-header">标题</th>
                                            <th scope="col" class="table-header">发布日期</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recent-news" class="bg-white divide-y divide-gray-200"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="card">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-lg font-bold text-dark">最近留言</h3>
                                <a href="/admin/messages" class="text-primary hover:text-primary/80 text-sm">查看全部</a>
                            </div>
                            
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="table-header">留言人</th>
                                            <th scope="col" class="table-header">留言内容</th>
                                            <th scope="col" class="table-header">留言时间</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recent-messages" class="bg-white divide-y divide-gray-200"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            {% endblock %}
        </div>
    </div>

    <script>
        // 侧边栏展开/折叠
        document.querySelectorAll('.sidebar-group').forEach(group => {
            const header = group.querySelector('.sidebar-link');
            const submenu = group.querySelector('.sidebar-submenu');
            const icon = header.querySelector('.fa-angle-down');
            const groupId = header.textContent.trim(); // 使用菜单标题作为唯一标识

            // 页面加载时恢复状态
            const savedState = localStorage.getItem(`sidebar_${groupId}`);
            if (savedState === 'open') {
                submenu.classList.remove('hidden');
                icon.classList.add('rotate-180');
            }

            header.addEventListener('click', () => {
                submenu.classList.toggle('hidden');
                icon.classList.toggle('rotate-180');
                // 保存状态到 localStorage
                if (!submenu.classList.contains('hidden')) {
                    localStorage.setItem(`sidebar_${groupId}`, 'open');
                } else {
                    localStorage.removeItem(`sidebar_${groupId}`);
                }
            });
        });

        // 移动端侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', () => {
            const sidebar = document.querySelector('aside');
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('block');
        });

        // 初始化数据和事件
        document.addEventListener('DOMContentLoaded', () => {
            // 这里可以添加初始化代码
        });
        
    window.addEventListener('DOMContentLoaded', function() {
        fetch('/api/stats')
            .then(response => response.json())
            .then(data => {
                // 更新新闻统计
                document.getElementById('news-count').textContent = data.news.count;
                updatePercentage('news-percentage', data.news.percentage);

                // 更新产品统计
                document.getElementById('product-count').textContent = data.products.count;
                updatePercentage('product-percentage', data.products.percentage);

                // 更新案例统计
                document.getElementById('case-count').textContent = data.cases.count;
                updatePercentage('case-percentage', data.cases.percentage);

                // 更新留言统计
                document.getElementById('message-count').textContent = data.messages.count;
                updatePercentage('message-percentage', data.messages.percentage);

                // 更新最近新闻
                const recentNewsList = document.getElementById('recent-news');
                recentNewsList.innerHTML = '';
                data.recent_news.forEach(news => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="table-data"><span class="text-primary hover:underline">${news.title || '无标题'}</span></td>
                        <td class="table-data">${news.publish_date || '无发布日期'}</td>
                    `;
                    recentNewsList.appendChild(row);
                });

                // 更新最近留言
                const recentMessagesList = document.getElementById('recent-messages');
                recentMessagesList.innerHTML = '';
                data.recent_messages.forEach(message => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="table-data">${message.name || '匿名用户'}</td>
                        <td class="table-data">${(message.content || '').substring(0, 20)}${(message.content || '').length > 20 ? '...' : ''}</td>
                        <td class="table-data">${message.created_at || '无留言时间'}</td>
                    `;
                    recentMessagesList.appendChild(row);
                });
            })
            .catch(error => {
                console.error('获取统计数据失败:', error);
            });

       // 辅助函数：更新百分比显示
    
        // 辅助函数：更新百分比显示
        function updatePercentage(elementId, percentage) {
            const element = document.getElementById(elementId);
            if (element) { // 添加元素存在性检查
                element.textContent = `${percentage >= 0 ? '+' : ''}${percentage}%`;
                if (percentage > 0) {
                    element.classList.remove('text-red-500');
                    element.classList.add('text-green-500');
                    // element.querySelector('i').className = 'fa fa-arrow-up mr-1';
                } else if (percentage < 0) {
                    element.classList.remove('text-green-500');
                    element.classList.add('text-red-500');
                    // element.querySelector('i').className = 'fa fa-arrow-down mr-1';
                }
            }
        }
    });
    </script>
</body>
</html>